Welcome to Css!

9.05 外边距踩坑2

1、行级元素只有左右边距,没有上下外边距

2、p元素不是行级元素,span元素和b元素如果换行了,中是会有一条空白,如果没有换行紧挨着,则不会出现此情况。

3、块级和行内块级元素的外边距4个方向都有效

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>css</title>

<style type="text/css">

.laoLiu{

width:150px;height:100px;background:#E1EFFF;

margin-bottom: 30px ;

margin-left: 30px ;

margin-right: 30px ;

margin-top: 30px ;

}

.laoQi{

width:150px;height:100px;background:green;

margin-left:30px;

}

</style>

</head>

<body>

<div style="background:gray;height:10px;"></div>

<span class="laoLiu">我要好好学习1</span><b class="laoQi">我要好好学习2</b>

<div style="background:purple;height:10px;"></div>

</body>

</html>

返回值:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>css</title>

<style type="text/css">

.laoLiu{

width:150px;height:100px;background:#E1EFFF;

margin: 50px ;

}

.laoQi{

width:150px;height:100px;background:green;

margin:30px;

}

</style>

</head>

<body>

<div style="background:gray;height:10px;"></div>

<img src="css7.03.01.png" alt="" class="laoLiu"> <img src="css7.03.01.png" alt="" class="laoQi">

<div style="background:purple;height:10px;"></div>

</body>

</html>

返回值: